import { useEffect, useState, useContext } from "react";

import { Collapse } from "@arco-design/web-react";
const CollapseItem = Collapse.Item;

import Drawer from "../editor/components/drawer";
import CreateComponents from "@/components/renderComponent/index";

import { templateContext } from "@/store/templateContext";

export default function ({ onChange }) {
    const { state, dispatch } = useContext(templateContext);
    return (
        <div className="relative overflow-hidden w-full h-full">
            <Drawer header="全局配置" visible={true}>
                <Collapse accordion style={{ maxWidth: 1180 }}>
                    {state.global.map((item, index) => (
                        <CollapseItem
                            key={index}
                            className="reset-collapse-item-box"
                            contentStyle={{ backgroundColor: "#ffffff" }}
                            header={item.name.zh_CN}
                            name={index}>
                            <CreateComponents
                                components={item.settings}
                                onChange={(el, idx, val) => {
                                    dispatch({ type: "updateGlobal", index: `${index}-${idx}`, value: val });
                                    dispatch({ type: "previewPostMessage" });
                                }}
                            />
                        </CollapseItem>
                    ))}
                </Collapse>
            </Drawer>
        </div>
    );
}
